<template>
  <a-modal :width="500" v-model:visible="showSetPositionDialog" title="管理岗位" title-align="start" :footer="false" :mask-closable="false" @cancel="closedDialog">
    <a-input-search style="width: 320px" v-model="editVal" placeholder="填写岗位名称" button-text="确认添加" search-button @search="startAddPosition" />
    <a-table style="margin: 20px 0" :scroll="{ y: '300px' }" class="table-singe-line" :bordered="false" :columns="tableColumns" :data="positionList" size="mini" :pagination="false">
      <template #columns>
        <a-table-column v-for="(item, index) of tableColumns" :key="index" :align="item.align" :width="item.width" :title="item.title" :data-index="item.dataIndex">
          <template v-if="item.title === '状态'" #cell="{ record }">
            <a-switch v-model="record[item.dataIndex]" :checked-value="1" :unchecked-value="0" @change="changeStatus($event, record)" />
          </template>
          <template v-else-if="item.title === '操作'" #cell="{ record, rowIndex }">
            <a-space>
              <a-button type="text" size="mini" @click="startDeletePosition(record, rowIndex)">删除</a-button>
            </a-space>
          </template>
          <template v-else #cell="{ record }">
            {{ record[item.dataIndex] }}
          </template>
        </a-table-column>
      </template>
    </a-table>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { listPosition, updatePosition, deletePosition, createPosition } from '@/api/system'
  const emit = defineEmits(['closed'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
  })
  const showSetPositionDialog = ref(props.isShow)
  const positionList = ref<Array<any>>(props.list)
  const editVal = ref('')
  const tableColumns: Array<any> = [
    {
      title: '岗位名称',
      dataIndex: 'position',
    },
    {
      title: '状态',
      dataIndex: 'status',
    },

    {
      title: '操作',
      dataIndex: 'handle',
      width: 80,
    },
  ]
  // 查询岗位列表
  async function getListPosition() {
    const res: any = await listPosition()
    positionList.value = res?.data || []
  }
  getListPosition()
  // 修改登录状态
  async function changeStatus(status: any, position: any) {
    const res: any = await updatePosition({
      id: position.id,
      status: status,
    })
    if (res) {
      getListPosition()
    }
  }
  // 删除岗位
  function startDeletePosition(position: any, index: number) {
    Modal.confirm({
      title: '删除岗位',
      content: `请再次确认，将${position.position}删除？`,
      cancelText: '取消',
      okText: '删除',
      onOk: async () => {
        const res: any = await deletePosition({ idList: [position.id] })
        if (res) {
          Message.success('删除成功')
          positionList.value.splice(index, 1)
        }
      },
    })
  }
  // 添加岗位
  async function startAddPosition(val: string) {
    if (!val?.trim()) {
      Message.error('请输入岗位名称')
      return
    }
    const res: any = await createPosition({ position: val.trim() })
    if (res) {
      editVal.value = ''
      Message.success('添加成功')
      getListPosition()
    }
  }
  function closedDialog() {
    emit('closed')
  }
</script>
